<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>图片切换</title>

	<style type="text/css">
		* {
			margin: 0;
			pading: 0;
		}

		#outer {
			width: 640px;
			margin: 50px auto;
			padding: 20px;
			background-color: deepskyblue;
			text-align: center;
		}
	</style>

	<script type="text/javascript">

		window.onload = function () {
			//创建数组存储图片路径
			var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"];

			//获取两个按钮的元素对象
			var prev = document.getElementById("prev");
			var next = document.getElementById("next");

			//获取img对象
			var img = document.getElementsByTagName("img")[0];

			var index = 0;

			//获取提示文字对象
			var info = document.getElementById("info");

			//给按钮绑定单击事件
			prev.onclick = function () {
				//test
				//alert("上一张");
				index--;
				if (index < 0) {

					index = imgArr.length - 1;
				}


				img.src = imgArr[index];

				info.innerHTML = "共" + imgArr.length + "张图片" + "，当前为第" + (index + 1) + "张";
			}

			next.onclick = function () {
				//test
				//alert("下一张");
				index++;
				if (index > imgArr.length - 1) {
					index = 0;
				}
				img.src = imgArr[index];

				info.innerHTML = "共" + imgArr.length + "张图片" + "，当前为第" + (index + 1) + "张";
			}
		}
	</script>

</head>

<body>

	<div id="outer">

		<p id="info"></p>

		<img src="img/图片切换/1.jpg" alt="ppt1" />

		<button id=prev>上一张</button>
		<button id=next>下一张</button>

	</div>
</body>

</html>